<template>
  <div class="TabImgSwitchcard_box" :class="propValue.themeBtnClass">
    <ul
      class="flex TabSwitchcard_box"
      :class="TabSwitchcard_box"
      :style="{ 'justify-content': propValue.btnAlign }"
    >
      <li
        v-for="(item, i) of propValue.list"
        :key="i"
        :class="item.active ? 'TabSwitchcard_active' : ''"
        class="flex-center TabSwitchcard_btn"
        :style="getStyle(i)"
      >
        {{ item.title }}
        <div class="TabSwitchcard_hx"></div>
      </li>
    </ul>
    <div :class="TabSwitchcard_con" :style="getItemStyle()">
      <div
        v-for="(item, i) of propValue.list"
        :key="i"
        :style="{ 'justify-content': propValue.contentFlex }"
        class="TabSwitchcard_item flex-wrap"
        :class="item.active ? '' : 'hide'"
      >
        <div
          v-for="(ptiem, p) of item.imgList"
          :key="p"
          :style="{
            'margin-bottom': propValue.contentInnerBottom + 'rem',
            background: propValue.itemBackground,
            'box-shadow': propValue.boxShadow
              ? `0 2px 12px 0 ${propValue.shadowColor}`
              : '',
          }"
        >
          <a :href="ptiem.link ? ptiem.link : 'javaScript:;'">
            <img
              v-if="ptiem.url"
              :style="setImgStyle(propValue)"
              :src="ptiem.url"
              alt=""
            />
            <div
              class="flex-wrap"
              v-if="ptiem.title"
              :style="getTitleStyle(propValue)"
            >
              {{ ptiem.title }}
            </div>
            <div
              class="flex-wrap"
              v-if="ptiem.content"
              :style="getSubTitleStyle(propValue)"
            >
              {{ ptiem.content }}
            </div>
          </a>
        </div>

        <!-- <div>
          <div>
            <img :style="getimgStyle()" :src="item.img" alt="" />
          </div>
          <div
            :style="{
              width: propValue.rightBoxwidth + 'rem',
              'margin-left': propValue.rightBoxmarginLeft + 'rem',
              'margin-top': propValue.rightBoxmarginTop + 'rem',
            }"
          >
            <div :style="getTtileStyle()">{{ item.title }}</div>
            <div class="flex-wrap">
              <div
                class="TabSwitchcard_btn_item flex-center"
                v-for="(ptem, p) of item.btnlist"
                :key="p"
                :style="getBtnitemStyle()"
              >
                {{ ptem }}
              </div>
            </div>
          </div> -->
        <!-- </div> -->
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    propValue: {
      type: Object,
      default: () => {},
    },
    element: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      TabSwitchcard_con: "TabImgSwitchcard_con" + new Date().getTime(),
      TabSwitchcard_box: "TabImgSwitchcard_box" + new Date().getTime(),
    };
  },
  watch: {
    propValue: {
      handler: function (value) {
        let TabSwitchcardList = JSON.parse(
          localStorage.getItem("TabSwitchcardListImg")
        )
          ? JSON.parse(localStorage.getItem("TabSwitchcardListImg"))
          : [];
        for (let key in TabSwitchcardList) {
          if (TabSwitchcardList[key].Tabclass == this.TabSwitchcard_box) {
            TabSwitchcardList[key].activeBg = value.btnActiveColor;
          }
        }
        localStorage.setItem(
          "TabSwitchcardListImg",
          JSON.stringify(TabSwitchcardList)
        );
       for (let item of TabSwitchcardList) {
          if(item.themeBtnClass==this.propValue.themeBtnClass){
            this.tabchange(item);
          }
     }

        document
          .getElementsByClassName(value.themeBtnClass)[0]
          .style.setProperty("--themeTab", value.btnActiveColor);
      },
      deep: true,
    },
  },
  mounted() {
    let TabSwitchcardList = JSON.parse(
      localStorage.getItem("TabSwitchcardListImg")
    )
      ? JSON.parse(localStorage.getItem("TabSwitchcardListImg"))
      : [];
    // if (!TabSwitchcardList.length) {
      let thisitem = {
        Tabclass: this.TabSwitchcard_box,
        class: this.TabSwitchcard_con,
        activeBg: this.propValue.btnActiveColor,
      };
    document
      .getElementsByClassName(this.propValue.themeBtnClass)[0]
      .style.setProperty("--themeTab", this.propValue.btnActiveColor);
    console.log(TabSwitchcardList);
    for (let item of TabSwitchcardList) {
      if(item.themeBtnClass==this.propValue.themeBtnClass){
         item.class=this.TabSwitchcard_con = thisitem.class;
         item.Tabclass=this.TabSwitchcard_box = thisitem.Tabclass;
        this.tabchange(item);
      }
    }
      localStorage.setItem(
        "TabSwitchcardListImg",
        JSON.stringify(TabSwitchcardList)
      );
  },
  methods: {
    tabchange(item) {
      $(function () {
        // 1.点击上部的li，当前li 添加current类，其余兄弟移除类
        $(`.${item.Tabclass} li`).click(function () {
          // 链式编程操作
          $(this)
            .addClass("TabSwitchcard_active")
            .siblings()
            .removeClass("TabSwitchcard_active");
          // 2.点击的同时，得到当前li 的索引号
          var index = $(this).index();
          $(this)
            .css({
              color: item.activeBg,
            })
            .siblings()
            .css({
              color: "#000",
            });
          //    this>'.TabSwitchcard_hx'`

          console.log($(`.${item.class} .TabSwitchcard_item`));
          // 3.让下部里面相应索引号的item显示，其余的item隐藏
          $(`.${item.class} .TabSwitchcard_item`)
            .eq(index)
            .fadeTo(600, 1)
            .css({ display: "flex" })
            .siblings()
            .fadeTo(400, 0)
            .css({ display: "none" });
        });
      });
    },
    setImgStyle(value) {
      return {
        width: value.imgwidth + "rem",
        height: value.imgheight + "rem",
        "margin-right": value.imgright + "rem",
        "margin-left": value.imgleft + "rem",
        "margin-top": value.imgTop + "rem",
        "margin-bottom": value.imgBottom + "rem",
      };
    },
    getItemStyle() {
      return {
        "margin-top": this.propValue.itemTop + "rem",
      };
    },

    getBtnitemStyle() {
      return {
        width: this.propValue.btnitemwidth + "rem",
        height: this.propValue.btnitemheight + "rem",
        "line-height": this.propValue.btnitemheight + "rem",
        "border-radius": this.propValue.btnitemradius + "rem",
        "font-size": this.propValue.btnitemSize + "rem",
        color: this.propValue.btnitemColor,
        border: `1px solid ${this.propValue.btnborderColor}`,
        "margin-bottom": this.propValue.btnbottom + "rem",
        "margin-right": this.propValue.btnright + "rem",
        "margin-top": this.propValue.btntop + "rem",
        "margin-left": this.propValue.btnleft + "rem",
      };
    },
    getStyle(i) {
      return {
        width: this.propValue.btnWidth + "rem",
        height: this.propValue.btnHeight + "rem",
        color: this.propValue.list[i].active
          ? this.propValue.btnActiveColor + "!important"
          : "#000",
        "font-size": this.propValue.BtnSize + "rem",
        "line-height": this.propValue.btnHeight + "rem",
        margin: `0 ${this.propValue.BtnMiddleMargin + "rem"}`,
        "border-radius": this.propValue.Btnradius + "rem",
      };
    },
    getTitleStyle(value) {
      return {
        "font-size": value.titleSize + "rem",
        color: value.titleColor,
        "padding-right": value.titleBetweenPadding + "rem",
        "padding-left": value.titleBetweenPadding + "rem",
        "padding-top": value.titleAlignPadding + "rem",
        "padding-bottom": value.titleAlignPadding + "rem",
        "justify-content": this.propValue.titleAligin,
      };
    },
    //  getTtileStyle() {
    //   return {
    //     color: this.propValue.titleColor,
    //     "font-size": this.propValue.titleSize + "rem",
    //     "margin-top": this.propValue.titleTop + "rem",
    //     "justify-content": this.propValue.titleAligin,
    //   };
    // },
    getSubTitleStyle(value) {
      return {
        "font-size": value.ContentSize + "rem",
        color: value.ContentColor,
        "padding-right": value.contentBetweenPadding + "rem",
        "padding-left": value.contentBetweenPadding + "rem",
        "padding-top": value.contentAlignPadding + "rem",
        "padding-bottom": value.contentAlignPadding + "rem",
        "justify-content": this.propValue.FontcontentAlign,
      };
    },
    getHxstyle(i) {
      return {
        //    background:this.propValue.list[i].active?this.propValue.btnActiveColor+'!important':'',
      };
    },
  },
};
</script>
<style lang="scss" scoped>
.TabImgSwitchcard_box {
  --themeTab: #0061ff;
}
.TabImgSwitchcard_box .TabSwitchcard_btn {
  text-align: center;
  cursor: pointer;
  position: relative;
}
.TabSwitchcard_hx {
  position: absolute;
  width: 100%;
  height: 3rem;
  bottom: 0;
  border-radius: 4rem;
  background: transparent;
}
.TabImgSwitchcard_box .TabSwitchcard_active .TabSwitchcard_hx {
  // color: red;
  background: var(--themeTab);
}
.TabSwitchcard_active {
}
.hide {
  display: none;
}
</style>